<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .main ul li .li_box {
            height: 50px;
            line-height: 50px;
            display: -webkit-box;
            display: -webkit-flex;
            align-items: center;
            background-color: #fff;
            border-bottom: 1px solid #e8e8e8;
            padding: 0 15px;
        }
        .main ul li:first-child .li_box {
            height: 65px;
            line-height: 65px;
        }
        .main ul li:last-child .li_box {
            border-bottom: none;
        }
        .main ul li .li_box .li_boxl {
            font-size: 15px;
            color: #333;
        }
        .main ul li .li_box .li_boxc {
            color: #999;
            font-size: 12px;
            padding: 0 8px;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: right;
        }
        .main ul li .li_box .li_boxc .li_img {
        	width: 43px;
        	height: 43px;
        	border-radius: 50%;
        	overflow: hidden;
        	margin-right: 7px;
        	float: right;
        }
        .main ul li .li_box .li_boxc .li_img img {
        	width: 100%;
        	height: 100%;
        	object-fit: cover;
        }
        .main ul li .li_box .li_boxr img {
        	height: 13px;
        	display: block;
        }
        .main ul li .li_box .li_boxr2 {
            color: #999;
            font-size: 12px;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            text-align: right;
            padding-left: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="main">
    	<ul>
    		<li tapmode onclick="fnHeadPortrait();">
                <div class="li_box">
                    <div class="li_boxl">头像</div>
                    <div class="li_boxc">
                    	<div class="li_img">
                    		<img class="my_img" src="../image/my.png">
                    	</div>
                    </div>
                    <div class="li_boxr">
                        <img src="../image/right.png">
                    </div>
                </div>
            </li>
            <li>
                <div class="li_box">
                    <div class="li_boxl">姓名</div>
                    <div class="li_boxr2 my_name">&nbsp;</div>
                </div>
            </li>
    		<li tapmode onclick="fnChangePhone();">
                <div class="li_box">
                    <div class="li_boxl">手机号</div>
                    <div class="li_boxc my_phone">&nbsp;</div>
                    <div class="li_boxr">
                        <img src="../image/right.png">
                    </div>
                </div>
            </li>
            <li>
                <div class="li_box">
                    <div class="li_boxl">联系地址</div>
                    <div class="li_boxr2 my_address">&nbsp;</div>
                </div>
            </li>
            <li>
                <div class="li_box">
                    <div class="li_boxl">身份证号</div>
                    <div class="li_boxr2 my_idcard">&nbsp;</div>
                </div>
            </li>
            <li>
                <div class="li_box">
                    <div class="li_boxl">提现账户</div>
                    <div class="li_boxr2 my_account">&nbsp;</div>
                </div>
            </li>
    	</ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    apiready = function(){
        staffData = $api.getStorage('staff_data');
        setInitData(staffData);
        api.addEventListener({
            name: 'changeStaffHead'
        }, function(ret, err){
            if( ret ){
                $(".my_img").attr('src',formatHeadImg(ret.value.path));
            }
        });
        
        api.addEventListener({
            name: 'changeStaffPhone'
        }, function(ret, err){
            if( ret ){
                $(".my_phone").html(ret.value.new_phone);
            }
        });
    };

    function setInitData (_staffData) {
        if(_staffData){
            $(".my_img").attr('src',formatHeadImg(_staffData.img));
        }
        if(_staffData && _staffData.username){
            $(".my_name").html(_staffData.username);
        }
        if(_staffData && _staffData.phone){
            $(".my_phone").html(_staffData.phone);
        }
        if(_staffData && _staffData.address){
            $(".my_address").html(_staffData.address);
        }
        if(_staffData && _staffData.idcard){
            $(".my_idcard").html(_staffData.idcard);
        }
        if(_staffData && _staffData.account){
            $(".my_account").html(_staffData.account);
        }
    };

    // 头像
    function fnHeadPortrait() {
        api.openWin({
            name: 'head_portrait',
            url: './head_portrait.html',
        });
    }

    // 手机号
    function fnChangePhone() {
        api.openWin({
            name: 'change_phone',
            url: './change_phone.html',
        });
    }
</script>
</html>